<template>
    <div>
        <vheader :ismini="iscollapse" :clientWidth="clientWidth"></vheader>
        <el-container style="border:0px solid #e3e3;">
            <el-main style="width:100%;">
                 <el-alert  :closable="false"
                    title="什么东西比一比你就能知道其实也就这样" 
                    type="success">
                </el-alert>
                <br>
                <el-alert  :closable="false"
                    title="场景一： 我现在会一种语言，我想去学习其他语言，语法比一下，示例比一下，你就会了；"
                    type="error">
                </el-alert>    
                
                <br>
                <el-alert  :closable="false"
                    title="场景二： 当你需要调用某个地方公司的接口，他们提供了各种加密方式，这个时候你会的是.net，你怎么做到与他们相同的加密呢，没有办法你之能去网上通过他们加密方式的关键字去一个一个的找，然后一个一个的尝试；"
                    type="error">
                </el-alert>  
                
                <br>
                <el-alert  :closable="false"
                    title="场景三： 我想去表白，我想使用各种语言去说“我爱你”，于是乎我得找各种翻译软件，一个一个的翻译，当然这个功能已经有类似的翻译软件实现了。"
                    type="error">
                </el-alert>          
            </el-main>
        </el-container>
        <vfooter></vfooter>
    </div>
</template>

<script>
import vheader from "../common/Header";
import vfooter from "../common/Footer";
export default {
  data() {
    return {
      iscollapse: false,
      clientWidth:1300,
    };
  },
  mounted: function() {
    let self = this;
    window.onresize = function() {
      self.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      self.clientWidth = document.documentElement.clientWidth;
      $(".el-main").height(self.clientHeight - 140);

      //获取宽度
      self.iscollapse = self.clientWidth < 768;
    };
    window.onresize();
  },
  components: { vheader,vfooter }
};
</script>

<style scoped>

</style>